import { message, Tag } from 'ant-design-vue'
import type { SpColumnsType } from '@/components/SpTable/type'
import { addDialog } from '@/components/SpDialog/index'
import ModalForm from '../form/modal.vue'
import type { FormExpose } from 'ant-design-vue/es/form/Form'
import { addDictAPI, deleteDictAPI, getDictListAPI, updateDictAPI } from './api'
import type { ListSysDictionaryType, SysDictionaryType } from './model'

export function useDict() {
  const columns: SpColumnsType[] = [
    {
      title: 'id',
      dataIndex: 'id',
      width: 100,
      align: 'center'
    },
    {
      title: '字典名称',
      dataIndex: 'name',
      width: 100,
      align: 'center'
    },
    {
      title: '字典类型',
      dataIndex: 'code',
      width: 200,
      align: 'center',
      type: 'slot'
    },
    {
      title: '状态',
      dataIndex: 'status',
      cellRenderer: (record: SysDictionaryType) => {
        if (!record.status) {
          return <Tag color="red">禁用</Tag>
        } else {
          return <Tag color="green">正常</Tag>
        }
      },
      width: 100,
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      align: 'center'
    }
  ]

  // 字典列表
  const dataList = ref<SysDictionaryType[]>([])
  // 请求参数
  const queryParams = ref<ListSysDictionaryType>({
    pageNum: 1,
    pageSize: 5,
    total: 0
  })
  // 加载状态
  const loading = ref(false)
  // 选中项
  const selectedRowKeys = ref<number[]>([])
  // 弹窗框Ref
  const modalRef = ref()

  // 获取字典列表
  function getDataList() {
    loading.value = true
    getDictListAPI(queryParams.value).then((res) => {
      dataList.value = res.data.rows
      queryParams.value.total = res.data.total
      loading.value = false
    })
  }

  // 打开弹窗
  function openModal(title: string, data?: SysDictionaryType) {
    addDialog({
      title: `${title}字典`,
      width: '40%',
      contentRenderer: () =>
        h(ModalForm, {
          ref: modalRef,
          data
        }),
      beforeSure: function (done) {
        // 关闭弹窗
        function chores(title: string, name: string, done: Function) {
          message.success(`您${title}了字典名称为${name}的这条数据`)
          done()
          getDataList()
        }
        const form = modalRef.value.getRef() as FormExpose
        form.validate().then((res) => {
          const formData = res as SysDictionaryType
          if (title == '编辑') {
            updateDictAPI(data?.id as number, formData).then(() => {
              chores(title, formData.name, done)
            })
          } else {
            addDictAPI(formData).then(() => {
              chores(title, formData.name, done)
            })
          }
        })
      }
    })
  }

  // 删除
  const deleteData = ({ id }: SysDictionaryType) => {
    deleteDictAPI(id as number).then(() => {
      message.success(`删除成功`)
      getDataList()
    })
  }

  // 批量删除
  function batchDeleteChange() {}

  // 选中项
  const onSelectChange = (keys: number[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys)
    selectedRowKeys.value = keys
  }

  // 分页
  function paginationChange(paging: number, size: number) {
    queryParams.value.pageNum = paging
    queryParams.value.pageSize = size
    getDataList()
  }

  // 清空
  function clear() {
    queryParams.value = Object.assign({
      pageNum: 1,
      pageSize: 5
    })
    getDataList()
  }

  // 搜索
  function search() {
    queryParams.value.pageNum = 1
    getDataList()
  }

  onMounted(() => {
    getDataList()
  })

  return {
    openModal,
    deleteData,
    search,
    clear,
    batchDeleteChange,
    onSelectChange,
    paginationChange,
    dataList,
    columns,
    queryParams,
    loading,
    selectedRowKeys
  }
}
